<template>
  <div class="upload-container">
    <div class="header-container">
      <div class="title">上传接口文档</div>
      <div class="button-container">
        <el-button type="primary" @click="showUploadDialog">上传接口文档</el-button>
      </div>
    </div>

    <!-- 接口文档表格 -->
    <div class="table-container">
      <el-table 
        v-loading="tableLoading"
        element-loading-text="正在加载接口文档..."
        element-loading-custom-class="custom-loading"
        :data="tableData" 
        style="width: 100%; background-color: transparent !important;" 
        :border="false"
        :cell-style="{backgroundColor: 'transparent', border: 'none'}"
        :header-cell-style="{backgroundColor: 'transparent', border: 'none'}"
        class="transparent-table"
        height="calc(100vh - 100px)"
      >
        <template slot="empty">
          <EmptyState />
        </template>
        <el-table-column prop="id" label="ID" min-width="8%" align="center" header-align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="project_name" label="项目名称" min-width="15%" align="center" header-align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="apifile_name" label="接口文档名称" min-width="20%" align="center" header-align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="file_path" label="文档路径" min-width="20%" align="center" header-align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="create_time" label="创建时间" min-width="15%" align="center" header-align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="notes" label="备注" min-width="12%" align="center" header-align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" min-width="15%" fixed="right" align="center" header-align="center">
          <template slot-scope="scope">
            <el-button 
              type="primary" 
              size="mini" 
              @click="viewDetails(scope.row)"
              :loading="loadingRows[scope.row.id]"
              :disabled="(activeDetailId && activeDetailId !== scope.row.id) || deleteLoadingRows[scope.row.id]"
            >查看详情</el-button>
            <el-button 
              type="danger" 
              size="mini" 
              @click="handleDelete(scope.row)"
              :loading="deleteLoadingRows[scope.row.id]"
              :disabled="isDeleting || activeDetailId === scope.row.id"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 上传对话框 -->
    <el-dialog
      title="上传接口文档"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="center-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- 加载遮罩层 -->
      <div v-if="isSubmitting" class="dialog-loading-mask">
        <div class="dialog-loading-content">
          <img src="../assets/loading.png" class="dialog-loading-icon" alt="loading" />
          <span class="dialog-loading-text">正在上传接口文档...</span>
        </div>
      </div>

      <el-form :model="formData" ref="uploadForm" label-width="120px" :rules="rules" size="small">
        <!-- 项目名称 -->
        <el-form-item label="项目名称" prop="project_name">
          <el-input v-model="formData.project_name" placeholder="请输入项目名称"></el-input>
        </el-form-item>

        <!-- 文档名称 -->
        <el-form-item label="文档名称" prop="file_name">
          <el-input 
            v-model="formData.file_name" 
            placeholder="请输入文档名称" 
            readonly
            class="filename-input"
          ></el-input>
        </el-form-item>

        <!-- 文档路径 -->
        <el-form-item label="文档路径" prop="file_path">
          <el-input v-model="formData.file_path" placeholder="请输入文档路径"></el-input>
        </el-form-item>

        <!-- 文件上传 -->
        <el-form-item label="上传文件" prop="file">
          <div class="file-upload-container">
            <div class="upload-controls">
              <el-upload
                class="upload-demo"
                ref="upload"
                action="#"
                :auto-upload="false"
                :on-change="handleFileChange"
                :before-change="beforeFileChange"
                :limit="1"
                :show-file-list="false"
                accept=".xlsx,.docx"
              >
                <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
              </el-upload>
              <div v-if="formData.file" class="selected-file">
                <span class="file-name" :title="formData.file_name">{{ formData.file_name }}</span>
                <i class="el-icon-close remove-file" @click="removeFile"></i>
              </div>
            </div>
            <div class="file-type-hint">支持的格式：.xlsx, .docx</div>
          </div>
        </el-form-item>

        <!-- 备注 -->
        <el-form-item label="备注" prop="notes">
          <el-input
            type="textarea"
            v-model="formData.notes"
            placeholder="请输入备注"
            :rows="2"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false" :disabled="isSubmitting">取消</el-button>
        <el-button type="primary" size="small" @click="submitForm" :disabled="isSubmitting">确定</el-button>
      </span>
    </el-dialog>

    <!-- 添加详情对话框 -->
    <el-dialog
      title="文档详情"
      :visible.sync="detailDialogVisible"
      width="95%"
      :close-on-click-modal="false"
      custom-class="detail-dialog"
      top="2vh"
      @closed="handleDetailDialogClose"
    >
      <div class="detail-view" v-if="currentFileData">
        <div class="detail-header">
          <div class="header-item">
            <span class="label">文件名称：</span>
            <span class="value">{{ currentFileData.file_name }}</span>
          </div>
          <div class="header-item">
            <span class="label">项目名称：</span>
            <span class="value">{{ currentFileData.project_name }}</span>
          </div>
        </div>
        <div class="detail-content">
          <el-table
            :data="currentPageData"
            style="width: 100%; background-color: transparent !important;"
            :border="false"
            :cell-style="{backgroundColor: 'transparent', border: 'none'}"
            :header-cell-style="{backgroundColor: 'transparent', border: 'none'}"
            class="transparent-table"
            height="calc(75vh - 180px)"
          >
            <!-- ID列 -->
            <el-table-column prop="id" label="ID" min-width="80" align="center" show-overflow-tooltip></el-table-column>
            
            <!-- 标题列 -->
            <el-table-column prop="title" label="标题" min-width="150" align="left" show-overflow-tooltip></el-table-column>
            
            <!-- URL列 -->
            <el-table-column prop="url" label="URL" min-width="200" align="left" show-overflow-tooltip></el-table-column>
            
            <!-- 请求方法列 -->
            <el-table-column prop="method" label="请求方法" min-width="100" align="center">
              <template slot-scope="scope">
                <el-tag :type="getMethodTagType(scope.row.method)">{{ scope.row.method }}</el-tag>
              </template>
            </el-table-column>
            
            <!-- 状态列 -->
            <el-table-column prop="status" label="状态" min-width="100" align="center">
              <template slot-scope="scope">
                <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            
            <!-- 参数列 -->
            <el-table-column prop="params" label="参数" min-width="200" align="left">
              <template slot-scope="scope">
                <div class="code-block">{{ formatJson(scope.row.params) }}</div>
              </template>
            </el-table-column>
            
            <!-- 示例列 -->
            <el-table-column prop="example" label="示例" min-width="200" align="left">
              <template slot-scope="scope">
                <div class="code-block">{{ formatJson(scope.row.example) }}</div>
              </template>
            </el-table-column>
            
            <!-- 响应列 -->
            <el-table-column prop="response" label="响应" min-width="200" align="left">
              <template slot-scope="scope">
                <div class="code-block">{{ formatJson(scope.row.response) }}</div>
              </template>
            </el-table-column>
            
            <!-- 备注列 -->
            <el-table-column prop="notes" label="备注" min-width="150" align="left" show-overflow-tooltip></el-table-column>
          </el-table>
          
          <!-- 分页器 -->
          <div class="pagination-container">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalRows"
              background
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleDetailDialogClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EmptyState from './EmptyState.vue'

export default {
  name: 'ApiCase',
  components: {
    EmptyState
  },
  data() {
    return {
      dialogVisible: false, // 控制对话框显示
      loading: false, // 控制loading状态
      tableLoading: false, // 控制表格loading状态
      formData: {
        project_name: '',
        file_name: '',
        file_path: '',
        notes: '',
        file: null
      },
      fileList: [],
      rules: {
        project_name: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        file_name: [
          { required: true, message: '请输入文档名称', trigger: 'blur' }
        ],
        file_path: [
          { required: true, message: '请输入文档路径', trigger: 'blur' }
        ]
      },
      tableData: [], // 表格数据
      detailDialogVisible: false,
      currentFileData: null,
      currentPage: 1,
      pageSize: 10,
      tableColumns: [],
      currentPageData: [],
      totalRows: 0,
      loadingRows: {}, // 查看详情按钮的loading状态
      deleteLoadingRows: {}, // 删除按钮的loading状态
      activeDetailId: null, // 添加新的状态来跟踪当前打开的详情ID
      isSubmitting: false, // 添加提交状态标志
      isDeleting: false, // 添加删除操作状态标志
    }
  },
  created() {
    console.log('组件created钩子被触发');
    // 页面创建时获取数据
    this.fetchApiDocuments()
  },
  mounted() {
    console.log('组件mounted钩子被触发');
  },
  beforeDestroy() {
    // 重置状态防止内存泄漏
    this.isDeleting = false;
    this.deleteLoadingRows = {};
    this.loadingRows = {};
  },
  methods: {
    // 获取接口文档列表
    fetchApiDocuments() {
      console.log('fetchApiDocuments方法被调用');
      
      // 从localStorage获取用户ID
      const userId = localStorage.getItem('userId')
      if (!userId) {
        console.warn('未找到用户ID，可能用户未登录')
        this.$message.warning('请先登录后再查看接口文档')
        this.tableData = []
        this.totalRows = 0
        return
      }
      
      // 设置表格loading状态
      this.tableLoading = true;
      
      // 调用接口获取数据，添加用户ID作为查询参数
      this.$axios.get('/api/api_project_list/', {
        params: {
          user_id: userId
        },
        timeout: 20000 // 设置超时时间为20秒
      })
        .then(response => {
          console.log('接口返回数据：', response.data);
          if (response.data && Array.isArray(response.data)) {
            // 直接使用返回的数组数据
            this.tableData = response.data;
            this.totalRows = response.data.length;
            console.log('设置表格数据：', {
              tableData: this.tableData,
              totalRows: this.totalRows
            });
          } else if (response.data && response.data.data) {
            // 兼容返回对象格式的情况
            this.tableData = response.data.data.list || response.data.data || [];
            this.totalRows = response.data.data.total || this.tableData.length;
            console.log('设置表格数据：', {
              tableData: this.tableData,
              totalRows: this.totalRows
            });
          } else {
            console.warn('接口返回数据格式不正确：', response.data);
            this.tableData = [];
            this.totalRows = 0;
          }
        })
        .catch(error => {
          console.error('获取接口文档列表失败:', error)
          this.$message.error('获取接口文档列表失败')
          this.tableData = [];
          this.totalRows = 0;
        })
        .finally(() => {
          // 无论成功还是失败，都需要关闭loading状态
          this.tableLoading = false;
          console.log('请求完成，loading状态已关闭');
        })
    },
    // 查看详情
    viewDetails(row) {
      if (!row || !row.id) {
        this.$message.error('无效的文档ID')
        return
      }
      
      // 设置当前活动的详情ID
      this.activeDetailId = row.id
      
      // 设置对应行的加载状态为true
      this.$set(this.loadingRows, row.id, true)
      
      // 构建请求参数
      const params = {
        apifile_name: row.apifile_name
      }
      
      this.$axios.get(`/api/api_file_content/${row.id}/`, { params })
        .then(response => {
          if (response.data && response.data.code === 200 && response.data.data) {
            this.currentFileData = response.data.data
            // 处理API列表数据
            if (this.currentFileData.api_list && Array.isArray(this.currentFileData.api_list)) {
              // 直接使用api_list作为表格数据
              this.currentPageData = this.currentFileData.api_list
              this.totalRows = this.currentFileData.api_list.length
              this.currentPage = 1
              // 更新分页数据
              this.updatePageData()
            } else {
              this.currentPageData = []
              this.totalRows = 0
            }
            this.detailDialogVisible = true
          } else {
            this.$message.warning(response.data.msg || '文件内容为空')
            // 如果获取数据失败，重置activeDetailId
            this.activeDetailId = null
          }
        })
        .catch(error => {
          console.error('获取文件内容失败:', error)
          this.$message.error('获取文件内容失败')
          // 如果发生错误，重置activeDetailId
          this.activeDetailId = null
        })
        .finally(() => {
          // 无论成功失败，都需要关闭loading状态
          this.$set(this.loadingRows, row.id, false)
        })
    },
    // 显示上传对话框
    showUploadDialog() {
      this.dialogVisible = true
    },
    // 关闭对话框
    handleClose() {
      // 检查表单是否有修改
      const hasChanges = this.formData.project_name || 
                        this.formData.file_name || 
                        this.formData.file_path || 
                        this.formData.notes || 
                        this.formData.file;
      
      if (hasChanges) {
        this.$confirm('确认关闭？未保存的数据将会丢失', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dialogVisible = false
          this.resetForm()
        }).catch(() => {})
      } else {
        this.dialogVisible = false
        this.resetForm()
      }
    },
    // 处理文件选择变化
    handleFileChange(file) {
      if (this.validateFileType(file)) {
        this.formData.file = file.raw
        this.formData.file_name = file.name
        this.fileList = []
      }
    },
    // 文件选择前的验证
    beforeFileChange(file) {
      return this.validateFileType(file)
    },
    // 验证文件类型
    validateFileType(file) {
      const fileName = file.name || ''
      const fileExtension = fileName.toLowerCase().split('.').pop()
      
      if (!['xlsx', 'docx'].includes(fileExtension)) {
        this.$message.error('只支持 .xlsx 和 .docx 格式的文件')
        return false
      }
      
      return true
    },
    // 提交上传
    submitForm() {
      console.log('submitUpload method called') // 添加调试日志
      
      this.$refs.uploadForm.validate(async (valid) => {
        console.log('Form validation result:', valid) // 添加表单验证结果日志
        
        if (!valid) {
          this.$message.error('请填写必填项')
          return
        }
        
        if (!this.formData.file) {
          this.$message.error('请选择要上传的文件')
          return
        }

        try {
          this.isSubmitting = true; // 开始提交，显示加载状态
          
          // 从localStorage获取用户ID
          const userId = localStorage.getItem('userId')
          if (!userId) {
            console.warn('未找到用户ID，可能用户未登录')
          }

          // 创建 FormData 对象用于文件上传
          const formData = new FormData()
          
          formData.append('project_name', this.formData.project_name)
          formData.append('file_name', this.formData.file_name)
          formData.append('file_path', this.formData.file_path)
          formData.append('notes', this.formData.notes || '')
          formData.append('file', this.formData.file)
          
          // 添加用户ID到请求中
          if (userId) {
            formData.append('user_id', userId)
          }

          // 调用后端接口
          console.log('准备发送请求，数据：', {
            project_name: this.formData.project_name,
            file_name: this.formData.file_name,
            file_path: this.formData.file_path,
            notes: this.formData.notes,
            user_id: userId || '未获取到',
            file: this.formData.file ? this.formData.file.name : null
          });

          // 确保API地址正确
          const apiUrl = '/api/create_api_project/'
          console.log('Sending request to:', apiUrl)

          const response = await this.$axios.post(apiUrl, formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            timeout: 20000
          })

          console.log('上传成功，响应：', response);
          this.$message.success('上传成功')
          this.dialogVisible = false
          this.resetForm()
          this.fetchApiDocuments()
        } catch (error) {
          console.error('上传失败:', error);
          let errorMessage = '未知错误'
          if (error.response) {
            console.error('Error response:', error.response)
            if (error.response.data && error.response.data.message) {
              errorMessage = error.response.data.message
            } else if (error.response.status) {
              errorMessage = `请求失败 (${error.response.status})`
            }
          } else if (error.message) {
            errorMessage = error.message
          }
          this.$message.error('上传失败：' + errorMessage)
        } finally {
          this.isSubmitting = false; // 结束提交，隐藏加载状态
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs.uploadForm.resetFields()
      this.formData = {
        project_name: '',
        file_name: '',
        file_path: '',
        notes: '',
        file: null
      }
      this.fileList = []
      if (this.$refs.upload) {
        this.$refs.upload.clearFiles()
      }
    },
    // 移除文件
    removeFile() {
      this.formData.file = null
      this.formData.file_path = ''
      this.formData.file_name = ''
      this.fileList = []
      this.$refs.upload.clearFiles()
    },
    // 删除接口文档
    handleDelete(row) {
      if (!row || !row.id) {
        this.$message.error('无效的文档ID')
        return
      }

      // 从localStorage获取用户ID
      const userId = localStorage.getItem('userId')
      if (!userId) {
        this.$message.warning('请先登录后再操作')
        return
      }

      this.$confirm('确认删除该接口文档吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 设置删除按钮的loading状态
        this.$set(this.deleteLoadingRows, row.id, true)
        // 设置全局删除状态为true，禁用所有删除按钮
        this.isDeleting = true

        // 打印要删除的文档信息
        console.log('准备删除文档:', {
          id: row.id,
          project_name: row.project_name,
          file_name: row.file_name,
          user_id: userId
        })

        // 方法一：使用DELETE方法，通过请求体传递id
        this.$axios.delete('/api/delete_api_project/', {
          data: {
            id: row.id  // 注意：后端期望的是id，而不是project_id
          }
        })
          .then(response => {
            console.log('删除成功，响应:', response)
            this.$message.success('删除成功')
            this.fetchApiDocuments() // 刷新列表
          })
          .catch(error => {
            console.error('删除失败:', error)
            let errorMessage = '未知错误'
            if (error.response) {
              console.error('错误响应状态:', error.response.status)
              console.error('错误响应数据:', error.response.data)
              if (error.response.data && error.response.data.msg) {
                errorMessage = error.response.data.msg
              } else if (error.response.status === 500) {
                errorMessage = '服务器内部错误'
              } else if (error.response.status === 404) {
                errorMessage = '找不到要删除的文档'
              }
            } else if (error.request) {
              errorMessage = '无法连接到服务器'
            } else {
              errorMessage = error.message
            }
            this.$message.error('删除失败：' + errorMessage)
          })
          .finally(() => {
            // 无论成功失败，都需要关闭loading状态
            this.$set(this.deleteLoadingRows, row.id, false)
            // 恢复全局删除状态，启用所有删除按钮
            this.isDeleting = false
          })
      }).catch(() => {
        // 用户取消删除操作
        console.log('用户取消删除操作')
      })
    },
    // 处理每页条数变化
    handleSizeChange(val) {
      this.pageSize = val
      this.updatePageData()
    },
    // 处理页码变化
    handleCurrentChange(val) {
      this.currentPage = val
      this.updatePageData()
    },
    // 更新当前页数据
    updatePageData() {
      if (this.currentFileData && this.currentFileData.api_list) {
        const start = (this.currentPage - 1) * this.pageSize
        const end = start + this.pageSize
        this.currentPageData = this.currentFileData.api_list.slice(start, end)
      }
    },
    // 获取方法标签类型
    getMethodTagType(method) {
      const methodMap = {
        'GET': 'success',
        'POST': 'primary',
        'PUT': 'warning',
        'DELETE': 'danger',
        'PATCH': 'info'
      }
      return methodMap[method && method.toUpperCase()] || 'info'
    },
    // 获取状态标签类型
    getStatusTagType(status) {
      const statusMap = {
        '200': 'success',
        '201': 'success',
        '400': 'warning',
        '401': 'warning',
        '403': 'warning',
        '404': 'info',
        '500': 'danger',
        '502': 'danger',
        '503': 'danger'
      }
      return statusMap[status && status.toString()] || 'info'
    },
    // 格式化JSON
    formatJson(json) {
      if (!json) return ''
      try {
        if (typeof json === 'string') {
          // 尝试解析JSON字符串
          return JSON.stringify(JSON.parse(json), null, 2)
        }
        // 如果已经是对象，直接格式化
        return JSON.stringify(json, null, 2)
      } catch (e) {
        // 如果解析失败，返回原始内容
        return json
      }
    },
    // 监听详情对话框的关闭
    handleDetailDialogClose() {
      this.activeDetailId = null // 重置当前活动的详情ID
    },
  },
  computed: {
  }
}
</script>

<style scoped>
/* 全局容器样式 */
.upload-container {
  padding: 20px;
}

/* 头部容器样式 */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* 标题样式 */
.title {
  font-size: 24px;
  font-weight: bold;
}

/* 表格容器样式 */
.table-container {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: -20px;
  padding-bottom: 0;
  height: calc(100vh - 100px);
}

/* 表格内容区域样式 */
:deep(.el-table) {
  padding: 0 !important;
  margin-bottom: 0 !important;
  height: 100% !important;
}

:deep(.el-table__body-wrapper) {
  height: calc(100% - 40px) !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 表格内容区域样式 */
.el-table >>> .el-table__header-wrapper,
.el-table >>> .el-table__body-wrapper {
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.el-table >>> .el-table__body-wrapper {
  height: calc(100% - 40px) !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 移除表格所有边框和背景色 */
.transparent-table.el-table {
  background-color: transparent !important;
}

.transparent-table.el-table::before,
.transparent-table.el-table::after {
  display: none;
}

.transparent-table.el-table .el-table__header-wrapper,
.transparent-table.el-table .el-table__body-wrapper {
  background-color: transparent !important;
}

.transparent-table.el-table .el-table__header th.el-table__cell {
  background-color: transparent !important;
  border: none !important;
  font-weight: normal;
  color: #606266;
}

.transparent-table.el-table .el-table__body td.el-table__cell {
  background-color: transparent !important;
  border: none !important;
  padding: 8px 0;
}

.transparent-table.el-table .el-table__body tr:hover > td.el-table__cell {
  background-color: transparent !important;
}

.transparent-table.el-table .el-table__body tr.hover-row > td.el-table__cell {
  background-color: transparent !important;
}

.transparent-table.el-table .el-table__body tr.el-table__row--striped > td.el-table__cell {
  background-color: transparent !important;
}

/* 对话框样式 */
.el-dialog {
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 8vh !important;
}

.el-dialog__header {
  padding: 15px 20px !important;
  background: transparent !important;
  border-bottom: none !important;
}

.el-dialog__body {
  padding: 10px 20px !important;
  background: transparent !important;
}

.el-dialog__footer {
  padding: 15px 20px !important;
  background: transparent !important;
  border-top: none !important;
}

/* 表单样式 */
.el-form-item__label {
  color: #606266;
}

.el-input__inner,
.el-textarea__inner {
  background: transparent !important;
  border: 1px solid #DCDFE6;
}

.el-button {
  padding: 8px 15px;
  font-size: 12px;
  border-radius: 3px;
  margin-left: 0px;
}

.el-button--text {
  border: none;
  padding: 0;
  margin: 0 5px;
  color: #409EFF;
}

.el-button--text:hover {
  color: #66b1ff;
}

.el-button--text:focus {
  color: #409EFF;
}

.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
  color: #fff;
}

/* 移除所有固定列的背景和边框 */
.el-table__fixed-right::before,
.el-table__fixed::before {
  display: none !important;
}

.el-table__fixed-right,
.el-table__fixed {
  background-color: transparent !important;
  box-shadow: none !important;
}

.el-table__fixed-right .el-table__fixed-header-wrapper,
.el-table__fixed .el-table__fixed-header-wrapper,
.el-table__fixed-right .el-table__fixed-body-wrapper,
.el-table__fixed .el-table__fixed-body-wrapper {
  background-color: transparent !important;
}

/* 文件上传区域样式 */
.file-upload-container {
  width: 100%;
  margin-bottom: 0;
}

/* 移除 el-form-item 的默认边距 */
:deep(.el-form-item__content) {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* 确保上传按钮容器与输入框对齐 */
.upload-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 调整上传按钮的位置和样式 */
.upload-demo {
  flex-shrink: 0;
}

:deep(.el-upload) {
  display: block;
  margin: 0;
  padding: 0;
}

:deep(.el-button) {
  margin: 0;
  padding: 8px 15px;
}

/* 文件类型提示的位置调整 */
.file-type-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #ff9900;
  padding-left: 0;
}

/* 选中文件后的显示区域 */
.selected-file {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  min-width: 0;
}

.file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #606266;
  font-size: 14px;
}

.remove-file {
  color: #909399;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  padding: 0 4px;
}

.remove-file:hover {
  color: #f56c6c;
}

/* 详情对话框样式 */
.detail-dialog {
  background: transparent !important;
}

.detail-header {
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
}

.detail-content {
  background: transparent !important;
}

/* 分页器样式 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
  padding-right: 20px;
}

:deep(.el-loading-mask) {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.cell-content-wrap {
  white-space: pre-wrap;
  word-break: break-all;
}

/* 自定义加载状态样式 */
:deep(.custom-loading) {
  .el-loading-spinner {
    display: none;
  }
  .el-loading-text {
    display: none;
  }
}

/* 自定义加载状态样式 */
.custom-loading >>> .el-loading-spinner {
  display: none;
}
.custom-loading >>> .el-loading-text {
  display: none;
}

/* 表格内容样式 */
.code-block {
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 150px;
  overflow-y: auto;
  font-size: 12px;
}

/* 表格标签样式 */
.el-tag {
  margin: 0 2px;
}

/* 表格头部样式 */
.detail-header {
  margin-bottom: 20px;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 4px;

  .header-item {
    display: inline-block;
    margin-right: 30px;

    .label {
      font-weight: bold;
      margin-right: 8px;
    }

    .value {
      color: #606266;
    }
  }
}

/* 表格容器样式 */
.detail-content {
  .el-table {
    margin-bottom: 20px;
  }
}

/* 分页器样式 */
.pagination-container {
  text-align: right;
  padding: 10px 0;
}

/* 滚动条样式 */
.code-block::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.code-block::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.code-block::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}

/* 文件名称输入框样式 */
:deep(.filename-input .el-input__inner) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 文件名称输入框样式 */
.filename-input >>> .el-input__inner {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 对话框加载遮罩样式 */
.dialog-loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.dialog-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dialog-loading-icon {
  width: 40px;
  height: 40px;
  animation: rotate 1.5s linear infinite;
}

.dialog-loading-text {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 确保对话框有相对定位，这样遮罩可以正确定位 */
.el-dialog {
  position: relative !important;
}

/* 表格内的按钮样式 */
.el-button--mini {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 3px;
  margin: 2px;
}
</style>

<!-- 添加全局样式 -->
<style>
/* 自定义加载样式 */
.custom-loading .el-loading-spinner .circular {
  display: none;
}

.custom-loading .el-loading-spinner::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  background: url(../assets/loading.png) no-repeat center center;
  background-size: contain;
  animation: rotate 1.5s linear infinite;
  margin: 0 auto;
}

/* 自定义加载文字样式 */
.custom-loading .el-loading-spinner .el-loading-text {
  color: #000000 !important; /* 黑色文字 */
  margin-top: 10px !important; /* 与图标保持10px距离 */
  font-size: 14px;
  display: block !important; /* 确保显示 */
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 深色主题支持 */
.theme-dark .upload-container .title,
.theme-dark .upload-container .el-table,
.theme-dark .upload-container .el-table th,
.theme-dark .upload-container .el-table tr,
.theme-dark .upload-container .el-table td,
.theme-dark .upload-container .el-table .cell,
.theme-dark .upload-container .file-name,
.theme-dark .upload-container .el-form-item__label,
.theme-dark .detail-header .label,
.theme-dark .detail-header .value,
.theme-dark .dialog-loading-text,
.theme-dark .file-type-hint,
.theme-dark .code-block {
  color: #FFFFFF !important;
}

.theme-dark .upload-container .el-input__inner,
.theme-dark .upload-container .el-textarea__inner {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-color: #555 !important;
  color: #FFFFFF !important;
}

.theme-dark .detail-header,
.theme-dark .code-block {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.theme-dark .el-dialog,
.theme-dark .el-dialog__header,
.theme-dark .el-dialog__body,
.theme-dark .el-dialog__footer {
  background-color: #1f1f1f !important;
  color: #FFFFFF !important;
}

.theme-dark .dialog-loading-mask {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.theme-dark .el-loading-mask {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .custom-loading .el-loading-spinner .el-loading-text {
  color: #FFFFFF !important;
}
</style>
